<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			#box {
				width: 80vw;
				height: 200vh;
			}

			#show {
				height: 100vh;
				color: black;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="box">
			这里什么都没有
		</div>
		<div id="show">
			这是侦测视窗
		</div>
		<script type="text/javascript">
			function isInViewPortOfOne(el, fn) {
				return function() {
					const viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body
						.clientHeight
					const offsetTop = el.offsetTop
					const scrollTop = document.documentElement.scrollTop
					const top = (offsetTop + el.clientHeight / 2) - scrollTop
					fn(top <= viewportHeight)
				}
			}

			const showBox = document.getElementById("show")
			const isShow = isInViewPortOfOne(showBox, (or) => {
				console.log(or ? "可见" : "不可见")
			})

			document.body.onscroll = function() {
				isShow()
			}
		</script>
	</body>
</html>